<template>
	<view class="type-wrap">
		<view class="wrap-header">
			<text>长按拖动分类可排序，轻触你添加的分类可编辑。</text>
		</view>
		<view class="type-list">
			<view class="account-list" v-for="item in typeList" :key="item.id" @click="handleClickSelectedType(item)">
				<view>
					<text class="iconfont"  :class="item.icon"></text>
				</view>
				<text class="title">{{item.name}}</text>
			</view>
			<view class="account-list" @click="handleClickOpen">
				<view class="add">
					<text class="iconfont icon-zengjia1"></text>
				</view>
				<text class="title classification">添加</text>
			</view>
		</view>
		<!-- 增加类型组件 -->
		<AddType :addTypeShowModal='addTypeShowModal' @closeType="closeType" />
	</view>
</template>

<script>
	import {defineComponent, onMounted, ref, reactive, toRefs, watch} from 'vue'
	import AddType from './components/AddType.vue'
	import {getAccountType} from '../../api/app.js'
	import {typeConfig} from '../../utils/config.js'
	export default defineComponent({
		components: {
			AddType
		},
		setup() {
			const state = reactive({
				selectedTypeShow: false,
				addTypeShowModal: false,
				typeList: [
					// {id: '1',name: '餐饮', flag: false, icon: 'icon-canyin'},
					// {id: '2',name: '交通', flag: false, icon: 'icon-jiaotong'},
					// {id: '3',name: '服饰', flag: false, icon: 'icon-clothes'},
					// {id: '4',name: '购物', flag: false, icon: 'icon-gouwu'},
					// {id: '5',name: '教育', flag: false, icon: 'icon-jiaoyu'},
					// {id: '6',name: '娱乐', flag: false, icon: 'icon-yule'},
					// {id: '7',name: '医疗', flag: false, icon: 'icon-yiliao'},
					// {id: '8',name: '保险', flag: false, icon: 'icon-baoxian'},
					// {id: '9',name: '生活缴费', flag: false, icon: 'icon-shenghuojiaofei'},
					// {id: '10',name: '红包', flag: false, icon: 'icon-hongbao'},
				]
			})
			
			// 获取类型
			const getType = () => {
				getAccountType().then(res=> {
					console.log(res)
					const {code, data} = res
					if (code === 200) {
						data.forEach(item => {
							item['flag'] = false
							item.icon = typeConfig[item.name]
						})
						state.typeList = data
					}
				})	
			}
			// 初始化
			onMounted(()=> {
				getType()
			})
			
			// 打开弹窗
			const handleClickOpen = () => {
				state.addTypeShowModal = true;
			}
			// 关闭类型弹窗
			const closeType = () => {
				state.addTypeShowModal = false;
				getType()
			}
			
			return {
				...toRefs(state),
				handleClickOpen,
				closeType
			}
		}
	})
</script>

<style scoped>
	.wrap-header{
		padding: 15px 50px;
		text-align: center;
	}
	.wrap-header text{
		font-weight: 500;
		font-size: 15px;
	}
	.type-list{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin-top: 15px;
	}
	.type-list .account-list {
		display: flex;
		flex-direction: column;
		width: 24%;
		/* margin-right: 30px; */
		margin-bottom: 15px;
		/* padding: 8px 0px; */
		color: #333;
		background: #FFF;
		font-size: 13px;
		text-align: center;
		border-radius: 4px;
	}
	.type-list .account-list .iconfont{
		padding: 5px;
		font-size: 18px;
		border-radius: 100%;
		background-color: #038F42;
		color: #fff;
	}
	.type-list .account-list view{
		margin-bottom: 10px;
	}
	.type-list .account-list .add .iconfont{
		background-color: #eee;
		color: #333;
	}
</style>
